<template>
	<rui-pages>
		<view class="chest">
			<rui-card class="chest_box" title="卡匣操作">
				<rui-chest></rui-chest>
			</rui-card>
			<rui-card>
				<view class="chest_info">
					<view class="chest_info_item">
						<view class="chest_info_item_label">
							卡匣状态
						</view>
						<view class="chest_info_item_content">
							卡匣正常
						</view>
					</view>
					<view class="chest_info_item">
						<view class="chest_info_item_label">
							失效时间
						</view>
						<view class="chest_info_item_content">

						</view>
					</view>
					<view class="chest_info_item">
						<view class="chest_info_item_label">
							目标位置
						</view>
						<view class="chest_info_item_content">

						</view>
					</view>
					<view class="chest_info_item">
						<view class="chest_info_item_label">
							剩余胶囊
						</view>
						<view class="chest_info_item_content">

						</view>
					</view>
				</view>
			</rui-card>
			<view class="chest_nav">
				<view class="chest_nav_item" v-for="(item, index) in data" :key="index">
					<view class="chest_nav_item_box">
						<rui-icons :type="item.icon" size="30"></rui-icons>
						<view class="chest_nav_item_box_name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>

	</rui-pages>
</template>

<script setup>
	let data = [{
			name: "读卡匣",
			icon: "read",
			command: 10
		},
		{
			name: "卡匣退",
			icon: "exit",
			command: 10
		},
		{
			name: "自动注射",
			icon: "injection",
			command: 10
		},
		{
			name: "卡匣复位",
			icon: "reset",
			command: 10
		},
		{
			name: "针头刺",
			icon: "thorn",
			command: 10
		},
		{
			name: "针头退",
			icon: "retreat",
			command: 10
		},
		{
			name: "下一个孔",
			icon: "next",
			command: 10
		},
		{
			name: "退出",
			icon: "start",
			command: 10
		},
	]
</script>

<style lang="scss" scoped>
	.chest {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;

		&_info {
			padding: 10px;
			&_item {
				margin-bottom: 15px;
				display: flex;
				align-items: center;

				&:last-child {
					margin-bottom: 0;
				}

				&_label {
					width: 100px;
					text-align: right;

					&::after {
						content: ":";
					}
				}

				&_content {
					background: var(--bg);
					padding: 8px;
					width: calc(100% - 130px);
					margin-left: 10px;
					border-radius: 5px;
					height: 28px;
				}
			}
		}

		&_nav {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: 1fr 1fr;
			gap: 15px;

			&_item {
				border-radius: 15px;
				border: 3px solid #f7f8f9;
				box-shadow: 0 3px 15px rgba(0, 0, 0, .06);
				background: linear-gradient(to bottom, #ebeff7, #fff);
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;

				&:active {
					background: var(--bg);
				}

				&_box {
					&_name {
						margin-top: 10px;
					}
				}
			}
		}

		&_box {
			grid-column: 1 / 3;
		}
	}
</style>